<template>
    <div id="app">
        <div v-if="isRouterAlive">
            <!-- 页面头部 -->
            <div class=hidden-xs id=top-bar>
                <div class=container>
                    <div class=row>
                        <div class="col-xs-12 col-md-9">
                            <ul class=top-bar-info>
                                <li><i class="fa fa-clock-o"></i>工作时间: {{baseData.workTime}}</li>
                                <li><i class="fa fa-phone"></i> 联系电话: {{baseData.tel}}</li>
                                <li><i class="fa fa-envelope-o"></i>E-mail: {{baseData.email}}</li>
                            </ul>
                        </div>
                        <div class="col-xs-12 col-md-3 col-sm-3 hidden-sm right-holder">
                            <a class="top-appoinment" @click="clickTab('/contact')">
                                <span>联系我们</span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>

            <header>
                <nav class="navbar navbar-custom navbar-default" data-offset-top=50 data-spy=affix>
                    <div class=container>
                        <div class=row>
                            <div class="navbar-header navbar-header-custom">
                                <button class="collapsed menu-icon navbar-toggle" type=button aria-expanded=false
                                        data-target=#bs-example-navbar-collapse-1 data-toggle=collapse><span
                                        class=icon-bar></span>
                                    <span class=icon-bar></span>
                                    <span class=icon-bar></span>
                                </button>
                                <a class=navbar-logo>
                                    <img alt="logo" :src="baseData.LOGO">
                                    <img alt="logo" :src="baseData.LOGO_TITLE">
                                </a>
                            </div>
                            <div class="collapse navbar-collapse" id=bs-example-navbar-collapse-1>
                                <ul class="nav navbar-links-custom navbar-nav navbar-right">
                                    <li
                                            v-for="(item,index) in headerRouter"
                                            :key="index"
                                            :class="item.path === active ? 'active-link' : 'line'"
                                    >
                                        <a @click="clickTab(item.path)"> {{item.name}}</a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </nav>
            </header>

            <!-- router-view 显示内容 -->
            <router-view></router-view>

            <!-- 页面底部  -->
            <div class="footer">
                <div class="container">
                    <div class="row">
                        <div class="col-xs-12 col-md-3 col-sm-12">
                            <div class="footer-column-1">
                                <img alt='鸿创LOGO' :src="baseData.LOGO" style="width: 80px;">
                                <div class="text-content mt-25">
                                    <p class=grey-color>{{baseData.title}}</p>
                                    <div class="white-color mt-20"></div>
                                    <p><i class="fa fa-envelope-o"></i> E-mail: {{baseData.email}}</p>
                                    <p><i class="fa fa-phone"></i> 联系电话: {{baseData.tel}}</p>
                                    <p><i class="fa fa-clock-o"></i> 工作时间: {{baseData.workTime}}</p>
                                    <p><i class="fa fa-map-marker"></i> 联系地址: {{baseData.address}}</p>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-md-3 col-sm-12 col-md-offset-1" v-if="otherCompanyList.length">
                            <div class=footer-column-heading><h6>其他公司</h6></div>
                            <div class="clearfix footer-post" style=" display: flex; align-items: center;"
                                 v-for="(item,index) in otherCompanyList" :key="index">
                                <div class="footer-post-img">
                                    <img :src="item.logo"/>
                                </div>
                                <div class="footer-post-content">
                                    <h6>
                                        <a :href="item.url" target="_blank">{{item.name}}</a>
                                    </h6>
                                </div>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-12 col-md-2">
                            <div class=footer-column-heading>
                                <h6>链接</h6>
                            </div>
                            <ul>
                                <li v-for="(item,index) in headerRouter" :key="index">
                                    <a @click="clickTab(item.path)"> {{item.name}}</a>
                                </li>
                            </ul>
                        </div>
                        <div class="col-xs-12 col-md-3 col-sm-12">
                            <div class=footer-column-heading><h6>加入我们</h6></div>
                            <div class="input-group newsletter-form">
                                <input placeholder="你的邮箱" type="email"/>
                                <span class=input-group-btn>
                            <button class="btn btn-default" type=submit>
                                <i class="fa fa-paper-plane-o" aria-hidden=true></i>
                            </button>
                            </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class=bottom-bar>
                <div class=container>
                    <div class=row>
                        <div class="col-xs-12 col-sm-6 col-md-6" v-show="false" >
                            <div class="white-color bottom-icons">
                                <p style="color: #4e4e4e !important;">Create By Jane</p>
                                <p style="color: #4e4e4e !important;">Time：2021-01-08</p>
                            </div>
                        </div>
                        <div class="col-xs-12 col-sm-6 col-md-6">
                            <div class="grey-color mt-10 right-holder">
                                <span>Copyright © 2021 </span>
                                <a href="https://beian.miit.gov.cn/" target="_blank" style="color: #aaaaaa;margin-left: 10px;">
                                    备案号：黔ICP备2021001214号-1
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <a href=# class=scroll-to-top><i class="fa fa-angle-up" aria-hidden=true></i></a>
        </div>
        <div v-if="!isRouterAlive"
             style=" width: 100%; height: 100vh; text-align: center; display: flex; justify-content: center; align-items: center;">
            <div class="row loader" style="width: 400px;">
                <div class="loader-icon"></div>
                <h4 style="margin: 40px;">贵州鸿创信息科技有限公司</h4>
            </div>
        </div>
    </div>
</template>

<script>
    import {getBaseData, getCompanyData} from "./api/base";

    const headerRouter = [
        {
            name: '首页',
            path: '/'
        },
        {
            name: '关于我们',
            path: '/aboutUs'
        },
        {
            name: '服务内容',
            path: '/services'
        },
        {
            name: '项目案例',
            path: '/projects'
        },
        {
            name: '企业资讯',
            path: '/information'
        },
        {
            name: '联系我们',
            path: '/contact'
        }
    ];
    export default {
        name: 'app',
        data() {
            return {
                //控制视图是否显示的变量
                isRouterAlive: true,
                headerRouter,
                active: '/',  // 当前页面默认 path ,

                // 网站基础信息
                baseData: {
                    LOGO: 'logo/logo.png',
                    LOGO_TITLE: 'logo/logo-title.png',
                    title: '贵州鸿创信息科技有限公司',
                    email: '--',
                    tel: '--',
                    workTime: '周一至周五 : 上午9:00-下午17:30',
                    address: '贵州省贵阳市观山湖区金融城MAX-D座15楼1515-1516室'
                },
                otherCompanyList: [],
                timer : null
            }
        },
        mounted() {
            if(!this.timer){
                this.timer = setTimeout(() => {
                    this.getDataSource();
                    this.getCompany();
                },1000)
            }
        },
        methods: {
            // 点击导航菜单
            clickTab: function (path) {
                this.active = path;
                this.$router.push(path);
            },
            // 获取基本信息
            getDataSource: async function () {
                const data = await getBaseData();
                if (data) {
                    let obj = this.baseData;
                    data.forEach((item) => {
                        let key = item['keywords'];
                        let value = item['content'];
                        if (key === 'company-email') obj['email'] = value;
                        if (key === 'company-mobile') obj['tel'] = value;
                        if (key === 'company-work-time') obj['workTime'] = value;
                        if (key === 'company-address') obj['address'] = value;
                    });
                    this.baseData = obj;
                    clearTimeout(this.timer);
                }
            },
            getCompany: async function () {
                const data = await getCompanyData();
                if (data) {
                    this.otherCompanyList = data;
                }
            },
        }
    }
</script>

<style>
    #app {
        background: #ffffff;
    }
</style>
